<!--
 * @Author: your name
 * @Date: 2020-09-24 12:17:52
 * @LastEditTime: 2020-09-24 15:49:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \antd-vue-pro\src\views\bigDashboard\index.vue

  <div class="divdarg" v-drag></div>

-->
<template>
<div class="container">

    <div class="divdarg">
        <div class="dragContent" v-drag.parent></div>
        <div class="dragRit" v-dragTransfer.X></div>
        <div class="dragBot" v-dragTransfer.Y></div>
        <div class="dragBR" v-dragTransfer></div>
    </div>
</div>
</template>

<script>
export default {
    mounted() {
        console.log('mounted');
    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="less">
.container {
    position: relative;
}

.divdarg {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    background: #d41200;
    left: 50px;
}

.dragRit {
    border: 3px transparent solid;
    width: 0px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    cursor: e-resize;
    z-index: 1;
}

.dragBot {
    border: 3px transparent solid;
    width: 100%;
    height: 0px;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: n-resize;
    z-index: 1;
}

.dragBR {
    border: 5px transparent solid;
    width: 0;
    height: 0px;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: nw-resize;
    z-index: 3;
}

.dragBR:hover {
    border-color: aquamarine;
}

.dragContent {
    width: 100%;
    height: 100%;
}
</style>
